<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>平台管理员</a-breadcrumb-item>
    <a-breadcrumb-item>用户反馈</a-breadcrumb-item>
  </a-breadcrumb>
  <!-- 查询 -->
  <a-form style="margin-bottom: 5px" layout="inline" :model="query">
    <a-form-item>
      <a-input v-model:value="query.cust_username" style="width: 160px">
        <template #prefix>用户名：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.feedback_text" style="width: 160px">
        <template #prefix>反馈详情：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.feedback_state" style="width: 160px">
        <template #prefix>状态：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button @click="getPage(1)" type="primary">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </a-form-item>
  </a-form>

  <!-- 表格定义 -->
  <a-table
    :columns="columns"
    :dataSource="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 操作按钮 -->
    <template #opr="{ record }">
      <a-button v-if="record.feedback_state==0" type="link" @click="openUpd(record)">回复</a-button>
      <a-button v-if="record.feedback_state==1" type="link" @click="openInfo(record)">详情</a-button>
    </template>
  </a-table>

  <!-- 回复弹窗 -->
  <a-modal v-model:visible="visible" title="回复反馈" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="用户名">
        <a-input v-model:value="updObj.cust_username" disabled />
      </a-form-item>
      <a-form-item label="反馈时间">
        <a-input v-model:value="updObj.feedback_time" disabled />
      </a-form-item>
      <a-form-item label="反馈详情">
        <a-input v-model:value="updObj.feedback_text" disabled />
      </a-form-item>
      <a-form-item label="回复">
        <a-input v-model:value="updObj.feedback_reply" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>

  <!-- 详情弹窗 -->
  <a-modal v-model:visible="visible2" title="反馈详情" @ok="exitInfo">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="用户名">
        <a-input v-model:value="updObj.cust_username" disabled />
      </a-form-item>
      <a-form-item label="反馈时间">
        <a-input v-model:value="updObj.feedback_time" disabled />
      </a-form-item>
      <a-form-item label="反馈详情">
        <a-input v-model:value="updObj.feedback_text" disabled />
      </a-form-item>
      <a-form-item label="回复管理员">
        <a-input v-model:value="updObj.platform_manager_username" disabled />
      </a-form-item>
      <a-form-item label="回复内容">
        <a-input v-model:value="updObj.feedback_reply" disabled />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";

const columns = [
  {
    title: "反馈编号",
    dataIndex: "feedback_num",
  },
  {
    title: "用户",
    dataIndex: "cust_username",
  },
  {
    title: "反馈时间",
    dataIndex: "feedback_time",
  },
  {
    title: "反馈详情",
    dataIndex: "feedback_text",
    width: 750,
  },
  {
    title: "状态",
    dataIndex: "feedback_state",
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr", //定义插槽，and bugs all caused by your careless
    },
  },
];
//分页处理-start
const query = reactive({});

const page = ref({}); //接收服务端返回的分页对象
//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pages: 5, //总页数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,共" +
      pagination.pages +
      "页,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/admin/a_feedback", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    pagination.total = page.value.total;
    pagination.pages = Math.ceil(page.value.total / pagination.pageSize);
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;

  pagination.pages = Math.ceil(pagi.total / pagination.pageSize);

  getPage(pagination.current);
};

//分页处理-end

//回复操作
const updObj = reactive({
  feedback_num: "", //冒号等号不分我真的要吐了
  cust_username: "",
  feedback_time: "",
  platform_manager_username: "",
  feedback_text: "",
  feedback_reply: "",
  feedback_state: "1",
});
const visible = ref(false);
const openUpd = (feedback) => {
  updObj.feedback_num = feedback.feedback_num;
  updObj.cust_username = feedback.cust_username;
  updObj.feedback_time = feedback.feedback_time;
  updObj.platform_manager_username = currentUser.value.m_id;
  updObj.feedback_text = feedback.feedback_text;
  visible.value = true;
};
const execUpd = () => {
  put("/admin/a_feedback", updObj).then((res) => {
    updObj.feedback_num = "";
    updObj.cust_username = "";
    updObj.platform_manager_username = "";
    updObj.feedback_time = "";
    updObj.feedback_text = "";
    updObj.feedback_reply = "";
    visible.value = false;
    tip.success("修改成功");
    getPage(page.value.current);
  });
};
//详情操作
const visible2 = ref(false);
const openInfo = (feedback) => {
  updObj.feedback_num = feedback.feedback_num;
  updObj.cust_username = feedback.cust_username;
  updObj.feedback_time = feedback.feedback_time;
  updObj.platform_manager_username = feedback.platform_manager_username;
  updObj.feedback_text = feedback.feedback_text;
  updObj.feedback_reply=feedback.feedback_reply;
  visible2.value = true;
};
const exitInfo = ()=>{
  updObj.feedback_num = "";
    updObj.cust_username = "";
    updObj.platform_manager_username = "";
    updObj.feedback_time = "";
    updObj.feedback_text = "";
    updObj.feedback_reply = "";
    visible2.value = false;
}
//获取当前管理员
const currentUser = ref({});
const getUser = ()=>{
  get("/security/m_home/currentManager").then((res) => {
    currentUser.value = res.data;
})};
getUser();
</script>